<template>
	<view class="container">
		<view class="nav" :style="{height:nav_h}">
			<view class="navigation">
				<image src="../../static/images/back.png" v-on:click="reback"></image>
				<view>购物车</view>
			</view>
		</view>
		<view class="nav_lh" :style="{height:nav_lh}"></view>
		<view class='none' v-if="result.length==0"><image style="width: 80upx;height: 80upx;" src="../../static/images/empty.png"></image>购物车内暂无商品</view>
		<block v-else>
		<checkbox-group>
			<view class='cart' v-for="(item,index) in result" :key="index">
			<!-- <view class='cart'> -->
				<view class='left' :id="item.goods_cart_id" v-on:click="delete_cart_goods">
				<!-- <view class='left' :id="item.goods_cart_id" v-on:click="delete_cart_goods"> -->
					<!-- <checkbox :value='item.goods_id' :checked='checked'></checkbox> -->
					<image style="width:40upx;" mode="widthFix" :src="static+'/delete.png'"></image>
				</view>
				<view class='middle'>
					<view class='pic'>
						<image :src='url+item.imgurl' :style="{height:pic_h}" mode="aspectFill"></image>
					</view>
					<view class='con'>
						<view class="title">{{item.goods_name}}</view>
						<view class="property">
							<!-- <view class='text_text' style='font-size:25upx;'>2322</view> -->
							<view class='text_text'>{{item.specs_name}}</view>
						</view>
						<view class="property">
							<view class='text_' style='color:red;'>￥{{item.grade_price}}</view>
						</view>
					</view>
					<view class='operation' :style="{height:pic_h}">
						<!-- <image class='jian'  :id="item.goods_cart_id" v-on:click='jian' src='../../static/images/jian.png'></image> -->
						<view class="jian" :id="item.goods_cart_id" v-on:click='jian'>-</view>
						<view class='number'>{{item.num}}</view>
						<!-- <image class='jian' :id="item.goods_cart_id"  v-on:click='jia' src='../../static/images/jia.png'></image> -->
						<view class="jian" :id="item.goods_cart_id" v-on:click='jia'>+</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<!-- <view class='submit' v-if="result.length!=0"> -->
			<!-- <view class='submit'></view> -->
		</block>
		<view class="lh"></view>
		<view class="opeate" v-if="result.length!=0">
			<view class='submit_left'>
				<text style='margin-left:30upx;height:60upx;line-height:60upx;font-size:30upx;'>总计：<text style="color:red;">￥{{total}}</text></text>
			</view>
			<view class='submit_middle'>共{{number}}件</view>
			<view v-on:click='order' class='submit_right'>马上下单</view>
		</view>
	</view>
</template>
<style>
/* pages/car/car.wxss */
page{  background-color:#F4F4F4;}
.nav{width:100%;padding-bottom: 20upx;display: flex;justify-content: flex-start;z-index: 999;
	      align-items: flex-end;position: fixed;top:0;left:0;background: #F4F4F4;}
.navigation{width:95%;padding-left:5%;height: 50upx;font-size: 28upx;color: #333;text-align: center;display: flex;justify-content: flex-start;align-items: center;}
.navigation image{width:35upx;height: 35upx;}
.navigation view{font-size: 32upx;color: #333;text-align: center;margin-left:33%;}
.nav_lh{width:100%;}
	
.cart{  width:96%;margin:10upx 0;padding:10upx 2%; background-color: #FFFFFF;  display: flex;flex-wrap: wrap;border-bottom: 1px dashed #FFFFFF;}
.left{  width:8%;display: flex;justify-content: center;align-items: center;}
.middle{width:92%;display: flex;justify-content: space-between;align-items: center;}
.pic{width:20%;overflow: hidden;}
.pic image{width:100%;}
.con{  width:53%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
.title{width:100%;font-size: 26upx;line-height: 50upx;}
.property{width:100%;display: flex;justify-content: flex-start;align-items: center;}
.text_text{line-height:50upx;font-size: 26upx;  color: #999999;}
.text_{line-height:50upx;font-size: 26upx;  color: #282828;}
.operation{display: flex;justify-content: flex-end;align-items: center;width:25%;}
.jian{width:40upx;height: 40upx;border:1px solid #E1E1E1;line-height: 40upx;text-align: center;font-size: 36upx;color: #999999;}

.number{ width: 60upx;height: 40upx;line-height: 40upx;  padding:0 10upx;border-top:1px solid #E1E1E1;border-bottom:1px solid #E1E1E1;
background-color: #FFFFFF;text-align: center;  font-size: 28upx;}


/* 下部 */
.submit{ display: flex;align-items: center;justify-content: flex-end;  height: 80upx;  width: 98%;padding-left:2%; background-color: #FFFFFF; border-top:1px solid #F4F4F4}
.submit_checkbox{width:15%;display: flex;justify-content: center;align-items: center;height: 80upx;}
.submit_left{width: 45%;line-height: 80upx;}
.submit_middle{ width: 20%;  text-align: center;  line-height: 80upx;  font-size: 30upx;  color: #aaa;}
.submit_right{background-image: linear-gradient(#43eac9, #24c3a4); width: 30%;border-radius: 40upx;
text-align: center;  line-height: 80upx; height: 80upx;  font-size: 28upx;  color: white;}

.none{width:100%;text-align: center;margin-top: 10upx;  font-size: 30upx;  color: #333;line-height: 80upx;display: flex;justify-content: center;align-items: center;}
.opeate{width:98%;padding:10upx 1%;background: #FFFFFF;height: 90upx;display: flex;border-bottom: 1px solid #F1F1F1;
		  justify-content: space-between;align-items: center;position: fixed;bottom:0;left:0;}
/*******************************/
	.lh{height: 100upx;width: 100%;}
	.foot{width:98%;padding:10upx 1%;background: #FFFFFF;height: 90upx;display: flex;
		  justify-content: space-between;align-items: center;position: fixed;bottom: 0;left:0;}
	.foot_unit{width:20%;display: flex;flex-direction: column;justify-content:space-between;
	           align-items: center;height: 80upx;}
	.foot_unit image{width:40upx;height: 40upx;}
	.add{width:80upx;display: flex;justify-content: center;align-items: center;height: 80upx;}
	.add image{width:80upx;height: 80upx;}
	.foot_unit_name{font-size: 24upx;color: #b5b5b5;}
	.foot_current{color: #3de9c7 !important;}
	/**********************************************/
</style>
<script>
	import toMpWeixin from '../../js_sdk/wzc-toMpWeixin/toMpWeixin.js';
	export default {
		data() {
			return {
				nav_h:'',
				nav_lh:'',
				pic_h:"",
				result:[],
				total:0,
				number:0,
				refresh_status:0,
				url: getApp().globalData.url,
				static:getApp().globalData.static,
				tab_current:'cart'
			}
		},
		onLoad() {
			var res = uni.getSystemInfoSync();
			var w   = res.windowWidth;
			this.pic_h = w*0.96*0.85*0.2+"px";
			this.nav_h  = res.statusBarHeight +35+ "px";
			this.nav_lh = res.statusBarHeight +45+ "px";
		},
		onShow()
		{
			this.initialize();
		},
		onPullDownRefresh() {
			// var member_id = uni.getStorageSync("member_id");
			this.refresh_status = 1;
			this.initialize();
		},
		methods: {
			reback:function()
			{
				uni.navigateBack();
			},
			order:function()
			{
				var member_id = uni.getStorageSync("member_id");
				
				var that = this;
				//#ifdef H5
					var open_status = 0;
					uni.request({
						url: this.url+'/wechat_get_address', 
						data: {member_id:member_id,type:2},
						header: {'Content-Type': 'application/json'},
						success: (res) => {
							if(res.data.status==1)
							{
								open_status = 1;
							}
							else
							{
								uni.showModal({
									title:"操作提示",
									content:"请先添加邮寄地址",
									showCancel:false,
									success: (address) => {
										uni.navigateTo({
											url:"/pages/member/address?type=cart"
										})
									}
								})
							}
						}
					});
					if(open_status==0)
					{
						return;
					}
				//#endif
				var replace_id = uni.getStorageSync("replace_id");
				if(replace_id=="")
				{
					replace_id = 0;
				}
				uni.request({
					url: this.url+'/wechat_add_order', 
					data: {member_id:member_id,replace_id:replace_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							//#ifdef APP-PLUS
							toMpWeixin({
								appId:'wxb7a354cd32681d5d',
								gid:'gh_87e8741e177a',
								path:'pages/mall/order?order_id='+res.data.order_id
							})
							//#endif
							//#ifdef MP-WEIXIN
							uni.redirectTo({url:"/pages/mall/order?order_id="+res.data.order_id})
							//#endif
							//#ifdef H5
							var ua = navigator.userAgent.toLocaleLowerCase();
							if(ua.match(/MicroMessenger/i) == 'micromessenger')
							{
							   var appid = 'wxb7a354cd32681d5d';
							   uni.setStorageSync("order_id",res.data.order_id);
							   var redirect_uri = encodeURIComponent(that.url+'/order?member_id='+member_id+'&order_id='+res.data.order_id);
							   window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize"+"?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
							}
							else
							{
								uni.redirectTo({url:"/pages/mall/order?order_id="+res.data.order_id})
							}
							
							//#endif
							
						}
					}
				});
				// uni.redirectTo({url:"/pages/shop/order?order_id=0"});
			},
			delete_cart_goods:function(e)
			{
				var id = e.currentTarget.id;
				var that = this;
				uni.showModal({
					title:"提示操作",
					content:"确认要删除购物车上的商品？",
					success:function(res)
					{
						if (res.confirm) 
						{
							var member_id = uni.getStorageSync("member_id");
							uni.request({
								url: that.url+'/wechat_delete_member_goods_cart', 
								data: {member_id:member_id,id:id},
								header: {'Content-Type': 'application/json'},
								success: (res) => {
									if(res.data.status==1)
									{
										if(that.result.length==1)
										{
											that.result = [];
											that.number = 0;
											that.total  = 0;
										}
										else
										{
											for(var i=0;i<that.result.length;i++)
											{
												if(parseInt(id)==that.result[i].goods_cart_id)
												{
													that.result.splice(i,1);
												}
											}
											var total  = 0;
											var number = 0;
											for(var i=0;i<that.result.length;i++)
											{
												total += that.result[i].grade_price * that.result[i].num;
												number += that.result[i].num;
											}
											that.total = total;
											that.number = number;
										}
									}
									else
									{
										uni.showToast({
											title:"系统忙",
											duration:2000
										})
									}
								}
							});
						} 
						else if (res.cancel) 
						{
							console.log('用户点击取消');
						}
					}
				})
			},
			jian:function(e)
			{
				var id = e.currentTarget.id;
				var total = 0;
				for(var i=0;i<this.result.length;i++)
				{
					if(this.result[i].num>1)
					{
						if(parseInt(id)==this.result[i].goods_cart_id)
						{
							this.result[i].num--;
							total = this.total - this.result[i].grade_price;
							this.total = total.toFixed(2);
							this.number = this.number-1;
							this.change_cart(this.result[i].goods_cart_id,"jian");
						}
					}
				}
				
			},
			jia:function(e)
			{
				var id = e.currentTarget.id;
				var total = 0;
				for(var i=0;i<this.result.length;i++)
				{
					if(parseInt(id)==this.result[i].goods_cart_id)
					{
						console.log("---------------------");
						console.log(this.result[i].promotion_99);
						console.log("---------------------");
						
						if(this.result[i].promotion==1 || this.result[i].promotion_99==1 || this.result[i].promotion_399==1)
						{
							uni.showToast({
								title:"限购一个",
								duration:1500
							})
						}
						else
						{							
							this.result[i].num++;
							total = parseFloat(this.total) + parseFloat(this.result[i].grade_price);
							this.total = total.toFixed(2);
							this.number = this.number+1;
							this.change_cart(this.result[i].goods_cart_id,"jia");
						}
					}
				}
			},
			change_cart:function(id,type)
			{
				uni.request({
					url: this.url+'/wechat_change_goods_cart', 
					data: {type:type,id:id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						
					}
				});
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+'/wechat_member_goods_cart', 
					data: {member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.result = res.data.result;
							var total  = 0;
							var number = 0;
							for(var i=0;i<res.data.result.length;i++)
							{
								total += res.data.result[i].grade_price * res.data.result[i].num;
								number += res.data.result[i].num;
							}
							that.total = total.toFixed(2);
							that.number = number;
						}
						else
						{
							that.result = [];
						}
						if(that.refresh_status==1)
						{
							that.refresh_status = 0;
							uni.stopPullDownRefresh();
						}
					}
				});
			}
		}
	}
</script>


